<template>
    <div style="width: 100%;">
        <a-row :gutter="20">
            <a-col :span="8" v-for="item in statList" class="lump_wrapper">
                <div class="lump_item">
                    <div class="lump_content">
                        <div class="value">{{ item.value }}</div>
                        <div class="label">{{ item.label }}</div>
                    </div>
                </div>
            </a-col>
        </a-row>
        <a-row :gutter="20">
            <a-col :span="14" style="margin: 15px 0 0;">
                <dv-border-box7 :color="['#0D3568', '#49ACD6']" backgroundColor="" style="padding: 10px; box-sizing: border-box;">
                    <div ref="chartRef1" style="width: 100%; height: 280px;"></div>
                </dv-border-box7>
            </a-col>
            <a-col :span="10" style="margin: 15px 0 0;">
                <dv-border-box7 :color="['#0D3568', '#49ACD6']" backgroundColor="">
                    <headline title="入住情况" />
                    <div ref="chartRef2" style="width: 100%; height: 250px;"></div>
                </dv-border-box7>
            </a-col>
        </a-row>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-liquidfill';

const statList = [
    { label: '实有楼栋', value: 67865 },{ label: '实有房屋', value: 324 },
    { label: '实有人口', value: 67865 },{ label: '实有车辆', value: 2354 },
    { label: '空置房', value: 532 },{ label: '重点人员', value: 1124 },
];

const chartRef1 = ref<Nullable<any>>();
const chartRef2 = ref<Nullable<any>>();

const renderChartEvent1 = () => {
    // xdata
    let xData = ['单间', '一室一厅', '两室一厅', '两室两厅', '三室两厅', '四室一厅', '四室两厅', '五室一厅', '五室两厅'];
    // ydata
    let yData = [20, 25, 14, 24, 56, 38, 45, 10, 8, 9];
   
    // 初始化图表
    const initEchart = echarts.init(unref(chartRef1)); 
    // echart图表配置
    const option = {
        tooltip: { 
            trigger: 'axis', 
            axisPointer: { type: 'shadow' },
            backgroundColor: 'rgba(0,0,0,0.8)',
            borderWidth: 0,
            formatter: (params:Recordable) => {
                let str = '';
                for(let i =0; i < params.length; i++){
                    const item = params[i];
                    const color = item.color?.colorStops[0].color;
                    str += `
                        <div style="color: #fff;">
                            <span style="
                                display:inline-block;
                                background-color: ${color};
                                width: 10px;
                                height: 10px;
                                border-radius: 50%;
                            "></span>
                            <span>${item.name}：${item.value}</span>
                        </div>
                    `
                }
                return str;
            },
            textStyle: {
                color: '#c1e7ff',
                fontWeight: 600,
            },
        },
        grid: {
            left: '15',
            top: '10',
            bottom: '15',
            right: '10',
            containLabel: true,
        },
        dataZoom: xData.length > 7 ? [
            {
                show: false,
                start: 0,
                end: 45,
            },
            {
                type: 'inside',
            }
        ] : [],
        xAxis: [{ 
            type: 'category', 
            data: xData, 
            axisTick: {
                alignWithLabel: true,
            }, 
            axisLabel: {
                fontSize: '90%',
                color: '#fff',
            }, 
            axisLine: { show: false },
        }],
        yAxis:[{ 
            name:'', 
            type: 'value', 
            nameTextStyle: { 
                color: '#fff',
                fontSize: '90%',
                padding: [0, 0, 0, -45]
            },
            splitLine: { 
                lineStyle: { 
                    color: 'rgba(85,183,244, .3)',
                    type: 'dashed',
                },
            }, 
            axisLabel: {
                fontSize: '90%',
                color: '#fff', 
            }, 
            axisLine: { show: false },
            axisTick: false
        }],
        series:[{ 
            type: 'bar', 
            barWidth: 25, 
            data: yData, 
            itemStyle: {
                color: (params: any) => {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(85,183,244,.8)'
                    }, {
                        offset: 1,
                        color: 'rgba(85,183,244,0)'
                    }])
                }
            },
            label: {
                show: true,
                color: '#c1e7ff',
                position: 'top',
                fontSize: '12',
            },
        }]
    };

    initEchart.setOption(option);

    window.addEventListener('resize', () => { //自适应大小
        initEchart.resize();
    });
}

const renderChartEvent2 = () => {

    const rich = {
        bule: {
            fontSize: 28,
            fontFamily: 'DINBold',
            color: '#66b1ff',
            fontWeight: '600',
            padding: [0, 0, 10, 10],
        },
    }

    const title = '入住率';
    const total = 45;
    const ratioLength = 3; //波浪数量
    const ratioArr = [];
    const ratioColor = ['#1991d2', '#3831f3', '#1991d2']; //波浪内颜色
    for (let ratioIndex = 0; ratioIndex < ratioLength; ratioIndex++) {
        ratioArr.push(total / 100)
    }

    // 初始化图表
    const initEchart = echarts.init(unref(chartRef2)); 
    // echart图表配置
    const option = {
        title: [
            {
                x: 'center',
                y: 'center',
                text: '{bule|' + total + '%}\n'+title,
                textStyle: {
                    fontSize: 16,
                    color: '#fff',
                    rich: rich,
                },
            },
        ],
        
        series: [{
                type: 'liquidFill',
                radius: '80%',
                center: ['50%', '50%'],
                color: ratioColor,
                data: ratioArr,
                backgroundStyle: {
                    // borderWidth: 1,
                    color: '#1f2c52'
                },
                label: {
                    formatter: '',
                },
                outline: {
                    show: false,
                }
            },
            { //细的外圈
                type: "pie",
                radius: ["89%", "90%"],
                center: ["50%", "50%"],
                data: [{
                        name: "",
                        value: total,
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            color: 'transparent'
                        },
                        emphasis: {
                            labelLine: {
                                show: false
                            },
                            itemStyle: {
                                color: 'transparent'
                            },
                        }
                    },
                    { //画剩余的刻度圆环
                        name: "",
                        value: 100 - total,
                        itemStyle: {
                            color: '#41496b'
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            labelLine: {
                                show: false
                            },
                            itemStyle: {
                                color: '#41496b'
                            },
                        }
                    }
                ]
            },
            { //粗的外圈
                type: "pie",
                radius: ["88%", "91%"],
                center: ["50%", "50%"],
                zlevel: 2,
                data: [
                    {
                        name: "",
                        value: total,
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00e2fe'
                            }, {
                                offset: 1,
                                color: '#0707ff'
                            }]),
                        },
                        emphasis: {
                            labelLine: {
                                show: false
                            },
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00e2fe'
                                }, {
                                    offset: 1,
                                    color: '#0707ff'
                                }]),
                            },
                        }
                    },

                    { //画剩余的刻度圆环
                        name: "",
                        value: 100 - total,
                        itemStyle: {
                            color: 'transparent'
                        },
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            labelLine: {
                                show: false
                            },
                            itemStyle: {
                                color: 'transparent'
                            },
                        }
                    }
                ]
            }
        ]
    };

    initEchart.setOption(option);

    window.addEventListener('resize', () => { //自适应大小
        initEchart.resize();
    });
}

onMounted(() => {
    renderChartEvent1();
    renderChartEvent2();
});
</script>

<style lang="less" scoped>
.lump_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    .lump_item {
        width: 150px;
        height: 100px;
        background: url('@/assets/image/shadow.png') 100% no-repeat;
        background-size: cover;
        position: relative;
        margin-top: 10px;
        .lump_content {
            position: absolute;
            left: 0;
            bottom: 30px;
            width: 100%;
            text-align: center;
            .value {
                font-size: 24px;
                font-family: AZ;
                font-weight: 500;
                color: #fff;
            }
            .label {
                font-size: 14px;
                font-family: PingFang SC;
                color: #01E6DB;
                margin-top: 4px;
                letter-spacing: 2px;
            }
        }
    }
}
</style>